<template>
	<view class="container">
		<!-- 流程步骤 -->
		<view class="process-steps">
			<view class="step-item" v-for="(step, index) in steps" :key="index">
				<view class="step-icon" :class="{active: currentStep >= index + 1}">
					{{ index + 1 }}
				</view>
				<text class="step-text">{{ step }}</text>
			</view>
		</view>

		<!-- 平台保障提示 -->
		<view class="platform-tip">
			<uni-icons type="info" size="16" color="#1989fa"></uni-icons>
			<text>平台居间保障，单独推送，效率更高</text>
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 需求描述 -->
			<view class="form-card" :style="{transform: 'rotateY(5deg)'}">
				<view class="form-header">
					<text class="form-title">*写明要帮做的事情</text>
				</view>
				<textarea class="form-input" placeholder="点击输入你的需求，如去某地领取快递送去某个宿舍、代打印资料、其他有偿互助...(敏感信息此处不要填写)"
					v-model="form.content" placeholder-class="placeholder"></textarea>
			</view>

			<!-- 互助时间 -->
			<view class="form-card" :style="{transform: 'rotateY(-5deg)'}">
				<view class="form-header">
					<text class="form-title">*需要互助的时间</text>
				</view>
				<input class="form-input" type="text" placeholder="填写具体时间，越精确越好" v-model="form.time"
					placeholder-class="placeholder" />
			</view>

			<!-- 联系方式 -->
			<view class="form-card" :style="{transform: 'rotateY(5deg)'}">
				<view class="form-header">
					<text class="form-title">*联系号码</text>
				</view>
				<input class="form-input" type="number" placeholder="请输入联系人的手机号码" v-model="form.phone"
					placeholder-class="placeholder" />
			</view>

			<!-- 佣金选择 -->
			<view class="form-card" :style="{transform: 'rotateY(-5deg)'}">
				<view class="form-header">
					<text class="form-title">*确认佣金</text>
					<text class="form-subtitle">输入你的预算金额~</text>
				</view>
				<view class="commission-options">
					<view v-for="(option, index) in commissionOptions" :key="index" class="commission-option"
						:class="{selected: form.commission === option}" @click="form.commission = option">
						{{ option }}元
					</view>
				</view>
			</view>

			<!-- 协议勾选 -->
			<view class="agreement">
				<checkbox-group @change="toggleAgreement">
					<label class="agreement-label">
						<checkbox :checked="form.agreed" color="#1989fa" />
						<text>我已阅读并同意</text>
						<text class="agreement-link">《逛逛校园圈跑腿平台发单系统协议》</text>
					</label>
				</checkbox-group>
			</view>
		</view>

		<!-- 底部发布栏 -->
		<view class="footer-bar">
			<view class="commission-display">
				<text>悬赏佣金</text>
				<text class="commission-amount">￥{{ form.commission || 0 }}</text>
			</view>
			<button class="publish-btn" :disabled="!canPublish" @click="handlePublish">
				发布订单
			</button>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'

	// 模拟数据
	const steps = ref([
		'填写信息',
		'支付佣金',
		'接单帮忙',
		'完成订单'
	])

	const commissionOptions = ref([3, 4, 5, 6, 8, 10])

	const hotList = ref([
		'校园周边新开了一家奶茶店，同学们快去打卡',
		'求代课：周三上午三四节计算机课程',
		'图书馆自习室新增了充电插座',
		'校园跑腿互助需求激增，快来参与',
		'毕业季二手交易市场火热进行中'
	])

	// 表单数据
	const form = ref({
		content: '',
		time: '',
		phone: '',
		commission: '',
		agreed: false
	})

	const currentStep = ref(1)

	// 计算属性
	const canPublish = computed(() => {
		return form.value.content && form.value.time && form.value.phone && form.value.commission && form.value
			.agreed
	})

	// 方法
	const toggleAgreement = (e) => {
		form.value.agreed = e.detail.value.length > 0
	}

	const handlePublish = () => {
		if (!canPublish.value) return

		uni.showLoading({
			title: '发布中...'
		})

		// 模拟API请求
		setTimeout(() => {
			uni.hideLoading()
			uni.showToast({
				title: '发布成功',
				icon: 'success'
			})
			// 重置表单
			form.value = {
				content: '',
				time: '',
				phone: '',
				commission: '',
				agreed: false
			}
		}, 1500)
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
		position: relative;
		padding-bottom: 120rpx;

		.process-steps {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.step-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex: 1;

				.step-icon {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					background-color: #ccc;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 10rpx;
					font-size: 28rpx;

					&.active {
						background-color: #1989fa;
					}
				}

				.step-text {
					font-size: 24rpx;
					color: #666;
					text-align: center;
				}
			}
		}

		.platform-tip {
			display: flex;
			align-items: center;
			background-color: #e6f7ff;
			padding: 16rpx 20rpx;
			border-radius: 8rpx;
			margin-bottom: 30rpx;

			uni-icons {
				margin-right: 10rpx;
			}

			text {
				font-size: 24rpx;
				color: #1989fa;
			}
		}

		.form-container {
			.form-card {
				background-color: #fff;
				border-radius: 16rpx;
				padding: 24rpx;
				margin-bottom: 24rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
				transition: all 0.3s ease;
				perspective: 1000px;
				transform-style: preserve-3d;

				&:active {
					transform: scale(0.98) rotateY(0deg);
				}

				.form-header {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.form-title {
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
					}

					.form-subtitle {
						font-size: 24rpx;
						color: #999;
						margin-left: 12rpx;
					}
				}

				.form-input,
				textarea {
					width: 94%;
					min-height: 80rpx;
					padding: 20rpx;
					background-color: #f9f9f9;
					border-radius: 19rpx;
					font-size: 26rpx;
				}

				.placeholder {
					color: #ccc;
					font-size: 26rpx;
				}

				.commission-options {
					display: flex;
					flex-wrap: wrap;
					gap: 20rpx;

					.commission-option {
						padding: 16rpx 30rpx;
						background-color: #f5f5f5;
						border-radius: 50rpx;
						font-size: 26rpx;
						color: #666;

						&.selected {
							background-color: #1989fa;
							color: #fff;
						}
					}
				}
			}

			.agreement {
				margin: 20rpx 0;

				.agreement-label {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #666;

					.agreement-link {
						color: #1989fa;
						margin-left: 4rpx;
					}
				}
			}
		}
		
		// 底部
		.footer-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

			.commission-display {
				display: flex;
				align-items: center;

				text {
					font-size: 28rpx;
					color: #333;
				}

				.commission-amount {
					font-size: 32rpx;
					color: #ff4d4f;
					font-weight: bold;
					margin-left: 12rpx;
				}
			}

			.publish-btn {
				background-color: #ccc;
				color: #fff;
				border-radius: 50rpx;
				width: 200rpx;
				margin-right: 80rpx;

				&[disabled] {
					background-color: #1989fa;
				}
			}
		}
	}
</style>